<!doctype html>
<html>

<head>
		<meta charset="utf-8">
		<title>个人中心</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<link rel="stylesheet"  type="text/css" href="css/iconfont.css">
		<style type="text/css">
			#list {
				/*避免导航边框和列表背景边框重叠，看起来像两条边框似得；*/
				margin-top: 55%;
			}
		</style>
	</head>

	<body>
	
		<style>
			* {
			    touch-action: pan-y;
			}
			body{
				background-color: #FFFFFF;
			}
			.mui-control-content {
				background-color: white;
				min-height: 50rem;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar{
				background-color:#ff9400;
			}
			.mui-table-view .mui-media-object{
				height: 100%;
				max-width: 130px;
			}
			.mui-bar-nav{
				position: absolute;
					background: url(images/my-top.png) no-repeat;
					height:40%;
					background-size: 100% 100%;
					    -webkit-background-size: 100% 100%;
			
			}
			.top-return {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-return img{
					     width: 75%;						
							}
			.mui-bar-nav .mui-title{
					color: #FFFFFF;
					right: unset;
			}
			
			.top-logo {
			position: absolute;
			    width: 10%;
				top: 0.1875rem;			
					}
					.top-logo img{
					    width: 90%;					
							}
			.top-menu {
			position: absolute;
				width: 10%;
				right: 5%;
				top: 0.1875rem;			
					}
					.top-menu img{
						 width: 75%;					
							}
							.mui-bar-tab .mui-tab-item.mui-active{
								color: #ea4609;
							}
					/* 公共部分end */
					.top-content{
						    height: 3rem;
						    background: #ea4609;
						    width: 110%;
						    margin-left: -3%;
					}
			.mui-table-view .mui-media, .mui-table-view .mui-media-body{
				line-height: 2rem;
			}
			.mui-slider-indicator.mui-segmented-control .mui-control-item {
				border-left:1px solid #c1c1c1 ;
				border-bottom:1px solid #c1c1c1 ;
				padding: 1px;
				color: #585858;
			}
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active{
				border-bottom:3px solid #e94709 ;
				color: #585858;
			}
			.my-head{
				    margin-left: 5%;
				    margin-top: 5%;
				    width: 70%;
			}		
			.my-head img{
				float: left;
				width: 25%;
			}
			.my-head span{
				margin-left: 10px;
				margin-right: 20px;
				float: left;
				color: #FFFFFF;
				margin-top: 8px;
			}
			.my-head .my-name{
				font-size: 15px;
			}
			.my-head .my-phone{
				font-size: 10px;
			}
			.mui-bar .mui-btn{
				font-weight: 400;
				position: relative;
				z-index: 20;
				margin-top: 0;
				padding: 6px 12px 7px;
				width: 15%;
				background:#ffc46c ;
				border: 0;
				border-radius: 30px;
				color: #FFFFFF;
				width: 20%;
				top: 10px;
				right: -10%;
			}
			.my-href {
				    position: absolute;
					width: 80%;
					height: 7rem;
					top: 50%;
					margin: 0 7%;
					background-color: #fff;
					border-radius: 15px;
					box-shadow: 1px 1px 20px #ededed;
						
			}
		.my-href .mui-table-view .mui-table-view-cell{
					float: left;
					width: 32%;
					
				}
			.mui-table-view:before, .mui-table-view::after{
					height: 0;
				}
				.my-href .mui-table-view .mui-table-view-cell img{
					max-width: 100%;
					width: 100%;
				}
			.my-href .mui-table-view .mui-table-view-cell span{
				font-size: 14px;
				color: #666666;
			}
			.my-href .mui-table-view{
				margin-left: 5%;
			}
			.mui-bar-nav~.mui-content{
				padding-top:20% ;
				background-color: #FFFFFF;
			}
			.mui-content .mui-icon{
				padding: 2px;
				border-radius: 15px;
				background-color: #E94709;	
				color: #FFFFFF;
				font-size: 15px;
				margin-right: 3px;
			}
			.mui-ios .mui-table-view-cell{
				color: #666666;
				font-size: 14px;
			}
			
		</style>
		<!-- 公共头部start -->
		<header class="mui-bar mui-bar-nav">
			<div class="top-content">
				<a class="top-logo"><img src="images/logo.png" ></a>
				<h1 class="mui-title">	
						Aitimt 爱计时</h1>
				<a class="top-menu" href="myremind.html" ><img src="images/mssage1.png" ></a>
			</div>
			<div class="my-message">
				<div class="my-head">
					<a href="mydata.html">
						<img src="images/head.png" >
						<span class="my-name">测试者
						</span>
						<span class="my-phone">手机号:13413799474
						</span>
					</a>
					
				</div>
				<a type="button" class="mui-btn" href="qiandao.html" >签到</a>
			</div>
			<div class="my-href">
				<ul class="mui-table-view">
					<li class="mui-table-view-cell mui-media">
						<a href="myapply.html">
							<img class="mui-media-object mui-pull-left" src="images/my1.png">
						</a>
						<span>我的报名</span>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="mypiecewise.html">
							<img class="mui-media-object mui-pull-left" src="images/my2.png">
						</a>
							<span>我的成绩</span>
					</li>
					<li class="mui-table-view-cell mui-media">
						<a href="myattention.html">
							<img class="mui-media-object mui-pull-left" src="images/my3.png">
				
						</a>
							<span>关注赛事</span>
					</li>
				</ul>
			</div>
			
		</header>
		<!-- 公共头部end -->
		<div class="mui-content">
			<ul id="list" class="mui-table-view mui-table-view-chevron">
				<li class="mui-table-view-cell">			
					<a class="mui-navigate-right" href="no.html">
						<span class="mui-icon iconfont icon-baoming"></span>
						常用报名人
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="no.html">
						<span class="mui-icon iconfont icon-zhaopian"></span>
						我的照片
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="mycoin.html">
						<span class="mui-icon iconfont icon-jinbi"></span>
						我的积分
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="no.html">
						<span class="mui-icon iconfont icon-suo"></span>
						设置密码
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="recruit1.html">
						<span class="mui-icon iconfont icon-sheying"></span>
						成为爱计时摄影师
					</a>
				</li>
				<li class="mui-table-view-cell">
					<a class="mui-navigate-right" href="no.html">
						<span class="mui-icon iconfont icon-tuichu"></span>
						退出登录
					</a>
				</li>
			</ul>
		</div>
		<!-- 公共底部start -->
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item" href="index.html">
				<span class="mui-icon iconfont icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="event.html">
				<span class="mui-icon iconfont icon-qizhi"></span>
				<span class="mui-tab-label">赛事</span>
			</a>
			<a class="mui-tab-item" href="grade.html">
				<span class="mui-icon iconfont icon-svg"></span>
				<span class="mui-tab-label">成绩</span>
			</a>
			<a class="mui-tab-item mui-active" href="my.html">
				<span class="mui-icon iconfont icon-copy"></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<!-- 公共底部end -->
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui('.mui-bar').on('tap','a',function(){
				document.location.href=this.href;
			})
		</script>
	
	</body>
	
</html>
